@import '../../style/variable.scss';
@import '../../style/hairline.scss';
@import '../../style/ellipsis.scss';

.xxm-button-ls{

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    -webkit-appearance: none;
    -webkit-text-size-adjust: 100%;
  
    height: $button-default-height;
    line-height: $button-line-height;
    font-size: $button-default-font-size;
    transition: opacity $animation-duration-fast;
    border-radius: $button-border-radius;
  
    &::before {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      border: inherit;
      border-radius: inherit; /* inherit parent's border radius */
      transform: translate(-50%, -50);
      opacity: 0;
      content: ' ';
  
      background-color: $black;
      border-color: $black;
    }

    &::after {
      border-width: 0;
    }
  
    &--active::before {
      opacity: 0.15;
    }
  
    &--unclickable::after {
      display: none;
    }
  
    &--default {
      color: $button-default-color;
      background: $button-default-background-color;
      border: $button-border-width solid $button-default-border-color;
    }
  
    &--primary {
      color: $button-primary-color;
      background: $button-primary-background-color;
      border: $button-border-width solid $button-primary-border-color;
    }
  
    &--info {
      color: $button-info-color;
      background: $button-info-background-color;
      border: $button-border-width solid $button-info-border-color;
    }
  
    &--danger {
      color: $button-danger-color;
      background: $button-danger-background-color;
      border: $button-border-width solid $button-danger-border-color;
    }
  
    &--warning {
      color: $button-warning-color;
      background: $button-warning-background-color;
      border: $button-border-width solid $button-warning-border-color;
    }
  
    &--plain {
      background: $button-plain-background-color;
  
      &.xxm-button-ls--primary {
        color: $button-primary-background-color;
      }
  
      &.xxm-button-ls--info {
        color: $button-info-background-color;
      }
  
      &.xxm-button-ls--cancel {
        color: $button-cancel-background-color
      }

      &.xxm-button-ls--danger {
        color: $button-danger-background-color;
      }
  
      &.xxm-button-ls--warning {
        color: $button-warning-background-color;
      }
    }
  
    &--large {
      width: 100%;
      height: $button-large-height;
    }
  
    &--normal {
      padding: 0 15px;
      font-size: $button-normal-font-size;
    }
  
    &--small {
      min-width: $button-small-min-width;
      height: $button-small-height;
      padding: 0 $padding-xs;
      font-size: $button-small-font-size;
    }
  
    // mini图标默认宽度50px，文字不能超过4个
    &--mini {
      display: inline-block;
      min-width: $button-mini-min-width;
      height: $button-mini-height;
      font-size: $button-mini-font-size;
  
      & + .xxm-button-ls--mini {
        margin-left: 5px;
      }
    }
  
    &--block {
      display: flex;
      width: 100%;
    }
  
    &--round {
      border-radius: $button-round-border-radius;
    }
  
    &--square {
      border-radius: 0;
    }
  
    &--disabled {
      opacity: $button-disabled-opacity;
    }
  
    &__text {
      display: inline;
    }
  
    &__loading-text,
    &__icon + &__text:not(:empty) {
      margin-left: $padding-base;
    }
  
    &__icon {
      min-width: 1em;
      line-height: inherit !important;
      vertical-align: top;
    }
  
    &--hairline {
      padding-top: 1px; // add 1px padding for text vertical align middle
      border-width: 0;
  
      &::after {
        border-color: inherit;
        border-width: 1px;
        border-radius: calc(#{$button-border-radius} * 2);
      }
  
      &.xxm-button-ls--round::after {
        border-radius: $button-round-border-radius;
      }
  
      &.xxm-button-ls--square::after {
        border-radius: 0;
      }
    }
}